<template>
	<view class="index">
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" :title="info.title"></nav-bars>
		<view class="s_detail">
			<view class="s_title">
				{{info.title}}
			</view>
			<view class="">
				<text>{{info.tag}}</text>
			</view>
			<view class="c_tit">
				<text>作者:{{info.author}}</text>
				<text style="float: right;">阅读:{{info.pv}}</text>
			</view>
			<!-- 音频 -->
			<view class="playvideo" v-if="info.category_id==1">
				<video style="width: 100%;height: 100rpx;" id="myVideo" :autoplay="true" :src="info.category_txt.path" controls></video>
			</view>
			<!-- 视频 -->
			<view class="playvideo" v-if="info.category_id == 2">
				<video style="width: 100%;" id="myVideo" :autoplay="true" :src="info.category_txt.path" controls></video>
			</view>
			
			<view>
				<u-parse :html="info.content"></u-parse>
			</view>
			<view class="c_tits">
				<text>发布时间:{{info.ctime}}</text>
			</view>
			<view class="img-km">
				<image src="https://cos.ryz1620.com/liankun/static/df1.gif" mode="widthFix"></image>
			</view>
		</view>
		<view class="topsx">相关推荐</view>
		<view class="list" v-for="(items,indexs) in infolist" :key="indexs" v-if="items.id != 1">
			<view class="i_cont" @click="gitdetail(items.id)">
				<view class="i_img"><image :src="items.cover"></image></view>
				<view class="i_bOper">
					<view class="i_tit">{{items.title}}</view>
					<view class="i_tits">{{items.brief}}</view>
					<view class="i_time">{{items.ctime}} <text>阅读:{{items.pv}}</text></view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="d_evaluate">
			<view class="d_eTitle">评论<text>({{commentList.length}})</text></view>
			<view class="d_eList">
				<view v-for="(comment,index) in commentList" :key="index">
					<view class="d_eItem">
						<view class="d_eHead" v-if="comment.user_id.avatar.path">
							<image :src="comment.user_id.avatar.path"></image>
						</view>
						<view class="d_eHead" v-else>
							<image src="https://manager.ryz1620.com/static/my/avator.png"></image>
						</view>
						<view class="d_eCont">
							<view @tap="dync_commentSelectReply(comment.id, comment.user_id.username)">
								<view class="d_eName">{{comment.user_id.username}}
									<!-- <view class="d_eAuth">作者</view> -->
								</view>
								<view class="d_eTxt">{{comment.content}}</view>
								<view class="d_eTxt">
									<view class="d_eTip" style="padding-left: 0;">{{comment.createTime}}</view>
									<view class="d_eTip" @tap.top="getcommentdel(comment.id)"
										v-if="comment.user_id.id == useid">删除</view>
									<view class="d_eTip" v-else style="color: #333;">回复</view>
								</view>
							</view>
							<view class="d_eIts">
								<view v-for="(reply,indes) in comment.sub_reply" :key="indes">
									<view class="d_eiItem"
										@tap="dync_commentSelectReply(reply.id, reply.user_id.username)">
										<view class="d_eiHead" v-if="reply.user_id.avatar.path">
											<image :src="reply.user_id.avatar.path"></image>
										</view>
										<view class="d_eiHead" v-else>
											<image src="https://manager.ryz1620.com/static/my/avator.png"></image>
										</view>
										<view class="d_eiCont">
											<view class="d_eiName">{{reply.user_id.username}}</view>
											<view class="d_eiTxt">
												<view v-if="reply.isReplay" style="color: #666; font-size: 20rpx;">
													回复<text class="d_eiReply">{{reply.reply_id.username}}</text>：
												</view>
												{{reply.content}}
											</view>
											<view class="d_eiTxt">
												<view class="d_eiTip">{{reply.createTime}}</view>
												<view class="d_eiTip" @tap.top="getcommentdel(reply.id)"
													v-if="reply.user_id.id == useid">删除</view>
												<view class="d_eiTip" v-else style="color: #333;">回复</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 评论框 -->
		<view class="d_talk">
			<view class="d_tShim"></view>
			<view class="d_tBox">
				<view class="d_tFuns">
					<view class="d_tFun" @click="is_show_model=true">
						<view class="d_tIcon iconfont icon-transpond"></view>
						<view class="d_tTxt">转发</view>
					</view>
					<view class="d_tFun" @click="trendStore(info)">
						<view class="d_tIcon" v-if="info.support_status == 1">
							<image src="/static/common/icon_collection.png"></image>
						</view>
						<view class="d_tIcon" v-else>
							<image src="/static/common/icon_collection2.png"></image>
						</view>
						<view class="d_tTxt">{{info.support_num}}</view>
					</view>
				</view>
				<!-- <view class="d_tInput"><input type="text" v-model="comment" @confirm="commentAuth" placeholder="评论一下吧~" placeholder-class="placeholder"/></view> -->
				<view class="d_tInput" v-if="!commentReplyName"><input type="text" placeholder-class="placeholder"
						:focus="commentFocus" v-model="content"
						:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
						@confirm="dync_comment" @input="inputKey($event, 'comment')" />
				</view>
				<view class="d_tInput" v-else>
					<input type="text" placeholder-class="placeholder" :focus="commentFocus" v-model="content"
						:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
						@confirm="dync_commentReply" @input="inputKey($event, 'comment')" />
				</view>
			</view>
		</view>
		
		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model?'show':'']" @click.stop="is_show_model=false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"
				@click.stop="">
				<view class="md-content">
					<view class="md-content-item">
						<view class="s_bIcon iconfont icon-friend"></view>
						<view>分享给好友</view>
						<button open-type="share" @click="is_show_model=false" class="sharebtn"></button>
					</view>
					<view class="md-content-item" @click="popShareToPicture">
						<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
						<view>生成分享大图</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model=false">取消</view>
			</view>
		</view>

	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_now from '@/service/now.js'
import service_mall from '@/service/mall.js'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
		  id:'',
		  info:{},
		  infolist:[],
		  userId: '',
		  popShare: false, // 弹窗-分享
		  // 评论
		  // 评论
		  commentPage: 0,
		  commentTime: 0,
		  commentList: [],
		  comment: '',
		  replyId: null,
		  content: '',
		  useid: '',
		  commentIsReply: false,
		  commentLoading: false,
		  commentReplyId: '',
		  commentReplyName: '',
		  is_show_model: false, //是否显示分享模态窗
		  commentFocus:true,
		}
	},
	onLoad(params) {
		this.$utils.getUrl()
		let scene = decodeURIComponent(params.scene);
		let token = uni.getStorageSync('token')
		scene = scene.split("&");
		let obj = {}
		for (let i = 0; i < scene.length; i++) {
			let newscene = scene[i].split("=");
			obj[newscene[0]] = newscene[1];
		}
		if (obj.id) {
			this.id = obj.id
			this.getdata(obj.id)
		
		}else {
			this.id = params.id
			this.getdata(params.id)
			this.dyna_getComment()
		}
		if (obj.share_uid) {
			let shareuId = obj.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
		this.userId = uni.getStorageSync('userId')
		if(params.share_uid){
			let shareuId= params.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
	},
	onShareAppMessage(res) {
		// let that = this
		if (res.from === 'button') {}
		this.getgetforwards()
		return {
			title: this.info.title,
			path: '/pages_now/pages/now/article/detail?id=' + this.id + '&share_uid=' + this.userId,
			success: function(res) {
				// that.getgetforwards()
			}
		}
	},
	methods: {
		// 获取详情
		getdata() {
			let params = {
				id:this.id,
				group_id:1,
				isRec: 1,
			}
			service_now.getpagingdetail(params)
			.then(res => {
				if (res.code == 1) {
					this.info = res.data.article
					this.infolist = res.data.recommend
					this.getpv()
				}
			})
		},
		
		gitdetail(id){
			uni.navigateTo({
				url:'/pages_now/pages/now/article/detail?id=' + id
			})
		},
		// 阅读记录
		getpv() {
			let params = {
				article_id: this.id
			}
			service_now.getpv(params)
			.then(res => {
				if (res.code == 1) {
					
				}
			})
		},
		// 转发
		getgetforwards() {
			service_now.getforward({
					article_id: this.id
				})
				.then(res => {})
		},
		// 关闭弹窗
		popShareClose() {
			this.popShare = false
		},
		// 跳转-海报页面
		popShareToPicture() {
			uni.navigateTo({
				url: '/pages_now/pages/now/article/share?id=' + this.id
			})
		},
		// 点赞
		trendStore(item) {
			let status = item.support_status
			if (status == 1) {
				uni.showModal({
					title: '提示',
					content: '确认取消点赞?',
					success: (res) => {
						if (res.confirm) {
							service_now.supportDemo({
									article_id: this.id,
									status: 0
								})
								.then(res => {
									if (res.code == 1) {
										this.info.support_status = 0
										this.info.support_num--
									} else {
										this.$utils.showErr({
											title: res.msg
										})
									}
								})
						} else if (res.cancel) {
							return
						}
					}
				});
			} else {
				service_now.supportDemo({
						article_id: this.id,
						status: 1
					})
					.then(res => {
						if (res.code == 1) {
							this.info.support_status = 1
							this.info.support_num++
						} else {
							this.$utils.showErr({
								title: res.msg
							})
						}
					})
		
			}
		
		},
		// 输入框输入内容事件
		inputKey(event, key) {
			this[key] = event.detail.value
		},
		// 获取文章的评价内容
		dyna_getComment() {
			this.commentTime++
			let commentTime = this.commentTime
			let commentPage = this.commentPage + 1
			// 获取评论数据
			service_now.getDemoComment({
					article_id: this.id,
					page: commentPage
				})
				.then(res => {
					if (this.commentTime === commentTime) {
		
						if (res.code == 1) {
							let data = res.data
							let list = this.v || []
							// 处理数据
							let nowTime = Date.now()
							for (let i = 0; i < data.length; i++) {
								data[i].create_time *= 1000
								data[i].createTime = this.$utils.getDateDiff(data[i].create_time)
								// 处理回复数据
								let replayList = data[i].sub_reply
								if (replayList && replayList.length) {
									for (let j = 0; j < replayList.length; j++) {
										replayList[j].create_time *= 1000
										replayList[j].createTime = this.$utils.getDateDiff(replayList[j]
											.create_time, )
		
										// 是否是回复 回复数据 的数据
										if (data[i].id !== replayList[j].parent_id) replayList[j].isReplay = true
									}
								}
								// 保存数据
								list.push(data[i])
							}
		
							this.commentPage++
							this.commentList = list
						}
					}
				})
				.catch(err => {
					if (this.commentTime === commentTime) {
						this.commentLoading = false
					}
				})
		},
		// 评论
		dync_comment() {
			let content = this.content
			service_now.commentDemo({
					article_id: this.id,
					content: content
				})
				.then(res => {
					if (res.code == 1) {
						this.TrendPage = 0
						this.commentPage = 0
						this.commentList = []
						this.case_idnum++
						this.content = ''
						this.dyna_getComment()
						this.getDetail()
					}
				})
				.catch(err => {
		
				})
		},
		// 回复他人评论
		dync_commentSelectReply(id, name) {
			this.commentIsReply = true
			this.commentReplyId = id
			this.commentReplyName = name
			this.content = ''
		},
		// 发布回复评论
		dync_commentReply() {
			service_now.replyDemo({
					comment_id: this.commentReplyId,
					content: this.content
				})
				.then(res => {
					if (res.code == 1) {
						this.commentIsReply = false
						this.commentPage = 0
						this.commentList = []
						this.commentReplyId = ''
						this.commentReplyName = ''
						this.content = ''
						this.dyna_getComment()
					}
				})
				.catch(err => {
		
				})
		},
		// 获取更多评论内容
		dync_commentNext(e) {
			this.dyna_getComment()
		},
		// 删除评论
		getcommentdel(id) {
			uni.showModal({
				title: '提示',
				content: '确认删除评论?',
				success: (res) => {
					if (res.confirm) {
						service_now.replyDemodel({
								comment_id: id
							})
							.then(res => {
								if (res.code == 1) {
									this.TrendPage = 0
									this.commentPage = 0
									this.commentList = []
									this.case_idnum--
									this.content = ''
									this.dyna_getComment()
									this.getTrend()
								} else {
									this.$utils.showErr({
										title: res.msg
									})
								}
							})
					} else if (res.cancel) {
						return
					}
				}
			});
		},
	
	}
}
</script>

<style lang="scss" scoped>
.index{
	width: 100vw;min-height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.articelist{
	padding:0 30rpx;
	border-bottom:15rpx #f5f5f5 solid;
}
.tabtop{
	line-height: 90rpx;
	font-size: 32rpx;
	.i_more{
		font-size: 28rpx;
		float: right;
		color: #999;
	}
}
.i_cont{
	height: 240rpx;
	padding: 20rpx;
	padding-left: 220rpx;
	position: relative;
	.i_img{
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		top:20rpx;
		left: 0;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.i_tit{
		font-size:30rpx;
		height: 80rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
	}
	.i_tits{
		font-size:26rpx;
		height: 68rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
		  color: #999;
	}
	.i_time{
		font-size:26rpx;
		color: #999;
	}
}
.s_detail{
	padding: 20rpx;
}
.c_tits{
	font-size: 28rpx;
	color: #999;
	line-height: 80rpx;
}
.s_title{
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.c_tit{
	line-height: 80rpx;
	border-bottom: 1px #f1f1f1 solid;
	margin-bottom: 30rpx;
	color: #888;
}
.list{
	padding:0 30rpx;
}
.i_cont{
	height: 240rpx;
	padding: 20rpx;
	padding-left: 220rpx;
	position: relative;
	.i_img{
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		top:20rpx;
		left: 0;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.i_tit{
		font-size:30rpx;
		height: 80rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
	}
	.i_tits{
		font-size:26rpx;
		height: 68rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
		  color: #999;
	}
	.i_time{
		font-size:26rpx;
		color: #999;
		text{
			float: right;
		}
	}
}
.img-km{
	margin:30rpx 0;
}
.topsx{
	padding:20rpx;
	font-size:32rpx;
	font-weight:bold;
}
// 评论=====
		.d_evaluate {
			padding: 40rpx 0;
			background: #fff;

			.d_eTitle {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: bold;
				padding-left: 36rpx;

				&>text {
					font-size: 24rpx;
					font-weight: bold;
					padding-left: 8rpx;
				}
			}

			.d_eList {
				padding-left: 32rpx;
			}

			.d_eItem {
				margin-top: 30rpx;

				&:nth-last-child(1) .p_eCont::after {
					content: none;
				}
			}

			.d_eHead,
			.d_eIts .d_eiHead {
				width: 66rpx;
				height: 66rpx;
				margin-right: 16rpx;
				border-radius: 50%;
				background: #f0f0f0;
				float: left;
			}

			.d_eCont {
				padding-bottom: 28rpx;
				position: relative;
				overflow: hidden;

				&::after {
					content: "";
					width: 100%;
					height: 1px;
					background: #f4f4f4;
					position: absolute;
					bottom: 0;
					left: 0;
					transform: scaleY(.5);
				}
			}

			.d_eName,
			.d_eIts .d_eiName {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
			}

			.d_eAuth,
			.d_eIts .d_eiAuth {
				width: 64rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #333;
				font-size: 20rpx;
				margin-left: 8rpx;
				border-radius: 28rpx;
				background: #f6f7fb;
				display: inline-block;
			}

			.d_eTxt,
			.d_eIts .d_eiTxt {
				min-height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				padding-right: 32rpx;
				margin-top: 4rpx;
			}

			.d_eTip,
			.d_eIts .d_eiTip {
				color: #939393;
				font-size: 20rpx;
				padding-left: 16rpx;
				display: inline-block;
			}

			// 他人回复
			.d_eiItem {
				margin-top: 16rpx;
			}

			.d_eiCont {
				overflow: hidden;
			}

			.d_eiReply {
				color: #939393;
				font-size: 20rpx;
				padding: 0 4rpx;
			}
		}

		// 评论框=====
		.d_talk {
			.d_tShim {
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}

			.d_tBox {
				width: 100vw;
				height: 96rpx;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				background: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 101;
				box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, .16);
			}

			.d_tFuns {
				padding-left: 30rpx;
				float: right;
			}

			.d_tFun {
				width: 110rpx;
				height: 96rpx;
				float: right;
			}

			.d_tIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #6c6c6c;
				font-size: 40rpx;
				margin: 0 auto;
				padding-top: 14rpx;
				box-sizing: content-box;
			}

			.d_tTxt {
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #939393;
				font-size: 20rpx;
			}

			.d_tInput {
				height: 60rpx;
				margin: 20rpx 0 0 32rpx;
				border-radius: 60rpx;
				overflow: hidden;

				&>input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding: 0 28rpx;
					background: #f6f7fb;
				}
			}
		}
.cu-modal {
		position: fixed;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		top: 0;
		display: none;
		width: 100%;
		z-index: 500;
	}

	.show {
		display: block;
	}

	.bottom-md {
		position: absolute;
		bottom: 0;
		background: #fff;
	}

	.share {
		position: fixed;
		color: #FFFFFF;
		right: 0;
		bottom: 190rpx;
		background: linear-gradient(to bottom right, #FE726B, #FE956B);
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
	}

	.cancel {
		width: 100vw;
		padding: 30rpx;
		text-align: center;
		background: #FFFFFF;
		color: #888;
		font-weight: normal;
		font-size: 30rpx;
	}

	.md-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
	}

	.md-content-item {
		margin: 0 90rpx;
		position: relative;
	}

	.md-content-item image {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
	}

	.md-content-item view {
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.md-content-item .s_bIcon {
		font-size: 72rpx;
	}

	.s_bIcon {
		width: 112rpx;
		height: 112rpx;
		color: #fff;
		font-size: 140rpx;
		margin: 60rpx auto 0;
		border-radius: 50%;
		background: #8bc37a;
		box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s_bIcons {
		background: #ffd425;
	}

	.i_tBtn {
		width: 102rpx;
		height: 102rpx;
		background: rgba(0, 0, 0, .4);
		border: 1px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.i_tbImg {
		width: 42rpx;
		height: 42rpx;
		margin: 20rpx auto 0;
	}

	.i_tbTxt {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 58rpx;
		left: 0;
	}		
</style>